<template>
	<el-drawer style="padding: 0" v-model="visible" :show-close="false" :destroy-on-close="true" size="100%">
		<template #header="{ close, titleId, titleClass }">
			<span :id="titleId" :class="titleClass">{{ title }}</span>
			<el-button class="btnReturn" @click="close">返回</el-button>
		</template>
		<div class="versionManaClass">
			<el-scrollbar style="overflow: hidden auto; width: 100%">
				<el-form :inline="true" :model="state.queryForm">
					<el-form-item>
						<el-button :icon="Plus" type="primary" @click="configureFileId(0)">配置字段</el-button>
					</el-form-item>
				</el-form>
				<el-table
					v-loading="state.dataListLoading"
					:data="state.dataList"
					border
					max-height="calc(100vh - 300px )"
					style="width: 100%"
					@selection-change="useCrud(state).selectionChangeHandle"
				>
					<el-table-column label="序号" type="index" width="100" align="center"></el-table-column>
					<el-table-column prop="status" label="当前状态" header-align="center" align="center"></el-table-column>

					<el-table-column prop="createTime" label="版本时间" header-align="center" align="center"></el-table-column>
					<el-table-column prop="creator" label="操作人" header-align="center" align="center"></el-table-column>
					<!-- <el-table-column prop="updateTime" label="操作时间" header-align="center" align="center"></el-table-column> -->
					<el-table-column label="操作" fixed="right" header-align="center" align="center" width="200">
						<template #default="scope">
							<el-button type="primary" link @click="configureFileId(scope.row.empiRuleInfoVersion)">查看</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					:current-page="state.page"
					:page-sizes="state.pageSizes"
					:page-size="state.limit"
					:total="state.total"
					layout="total, sizes, prev, pager, next, jumper"
					@size-change="useCrud(state).sizeChangeHandle"
					@current-change="useCrud(state).currentChangeHandle"
				>
				</el-pagination>
			</el-scrollbar>
		</div>
		<!-- 配置字段 -->
		<div class="configureClass" style="height: 100%" v-if="isConfigure">
			<configure-fileIds ref="configureFileIdsRef" @back="isConfigure = false" @close="getNewVersion"></configure-fileIds>
		</div>
	</el-drawer>
</template>
<script setup lang="ts">
import { useCrud } from '@/hooks/indexZSYPost.ts'
import { IHooksOptions } from '@/hooks/interface'
import { ref, reactive, nextTick } from 'vue'

import ConfigureFileIds from './configure-fileIds.vue'

const state: IHooksOptions = reactive({
	dataListUrl: '/empi/empiruleinfo/version-page',
	dataListLoading: true,
	queryForm: {
		ruleId: ''
	}
})

const isConfigure = ref(false)
const visible = ref(false)
const title = ref('')

const init = data => {
	isConfigure.value = false
	visible.value = true
	title.value = '规则名称： ' + data.ruleName
	state.queryForm.ruleId = data.ruleId

	useCrud(state).getDataList()
}

const configureFileIdsRef = ref()
// 配置字段
const configureFileId = versionId => {
	isConfigure.value = true
	nextTick(() => {
		configureFileIdsRef.value.init(versionId, state.queryForm.ruleId)
	})
}

const getNewVersion = () => {
	isConfigure.value = true
	useCrud(state).getDataList()
}

defineExpose({
	init
})

// const { selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteHandle } = useCrud(state)
</script>
<style lang="scss" scoped>
.configureClass .el-overlay {
	height: 100%;
	position: absolute !important;
	overflow: hidden;
}
</style>
